<template>
  <div class="login-page page">
    <div class="title">
      <span class="text lengku">肃州区数据资源池综合分析系统</span>
    </div>
    <div class="login-container">
      <div class="login-box">
        <div class="login-form">
          <div class="form-item">
            <i class="el-icon-user"></i>
            <input type="text" v-model="loginForm.username" placeholder="请输入用户名" />
          </div>
          <div class="form-item">
            <i class="el-icon-lock"></i>
            <input type="password" v-model="loginForm.password" placeholder="请输入密码" />
          </div>
          <div class="login-btn" @click="handleLogin">登 录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      // 这里暂时写死用户名和密码
      if (this.loginForm.username === 'admin' && this.loginForm.password === 'szqzyc2025!') {
        this.$router.push('/enter')
      } else {
        this.$message.error('用户名或密码错误')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  overflow: hidden;
  
  .title {
    position: absolute;
    transform: translate(-50%,0);
    top: 120px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 1400px;
    
    .text {
      font-size: 60px;
      font-weight: bold;
      color: #29F1FA;
      text-shadow: #296bfa 0 0 10px;
      font-family: 'lengku';
    }
  }

  .login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    
    .login-box {
      background: rgba(3, 70, 131, 0.8);
      backdrop-filter: blur(4px);
      border: 1px solid #29F1FA;
      box-shadow: 0 0 20px rgba(41,241,250,0.3);
      border-radius: 8px;
      padding: 40px;
      
      .login-form {
        .form-item {
          position: relative;
          margin-bottom: 30px;
          
          i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #29F1FA;
            font-size: 20px;
          }
          
          input {
            width: 100%;
            height: 50px;
            background: rgba(0,0,0,0.3);
            border: 1px solid #29F1FA;
            border-radius: 4px;
            padding: 0 20px 0 50px;
            color: #fff;
            font-size: 16px;
            
            &::placeholder {
              color: rgba(255,255,255,0.5);
            }
            
            &:focus {
              outline: none;
              border-color: #296bfa;
              box-shadow: 0 0 10px rgba(41,107,250,0.3);
            }
          }
        }
        
        .login-btn {
          width: 100%;
          height: 50px;
          background: linear-gradient(90deg, #29F1FA, #296bfa);
          border-radius: 4px;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(41,241,250,0.3);
          }
        }
      }
    }
  }
}
</style> 